<script setup lang="ts">
import { reactive, ref } from "vue"
import { createCraneOperation } from "../../../../../api/CraneOperation"
import _ from "lodash"
import { ElLoading, FormInstance, FormRules } from "element-plus"

const props = defineProps({
  id: String
})
const formRef = ref<FormInstance>()
const emit = defineEmits(["changState"])
const form = reactive({
  noNumber: "",
  applicantCompany: "",
  applyTime: "",
  homeworkAreaManagementUnit: "",
  territorySupervisor: "",
  proposer: "",
  guardian: "",
  workLocation: "",
  jobContent: "",
  operator: "",
  associationOn: "",
  liftingCertificate: "",
  craneCertificate: "",
  startMachineryName: "",
  liftingObjectContent: "",
  liftingObjectMass: "",
  jobContent1: "",
  jobGrade: "",
  isPlanCompiled: "是",
  startTime: "",
  endTime: "",
  existingRisk: []
})
const SubmitCraneOperation = function() {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        text: "正在存储...",
        background: "rgba(0, 0, 0, 0.7)"
      })
      const list = _.cloneDeep(form)
      list.existingRisk = JSON.stringify(list.existingRisk)
      createCraneOperation(list).then((res: { data: { id: string }; ret: boolean }) => {
        if (res.ret) {
          loading.close()
          emit("changState", {
            state: 1,
            id: res.data.id
          })
        }
      })
    } else {
      console.log("error submit!", fields)
    }
  })
}
const rules = reactive<FormRules>({
  applyTime: [{ required: true, message: "请输入作业申请时间", trigger: "blur" }],
  startTime: [{ required: true, message: "请输入作业开始时间", trigger: "blur" }],
  endTime: [{ required: true, message: "请输入作业结束时间", trigger: "blur" }]
})
</script>

<template>
  <div class="w-full h-full relative flex justify-center items-center">
    <el-form ref="formRef" :rules="rules" :model="form" label-width="auto" style="width: 80%">
      <el-row>
        <el-col :span="12">
          <el-form-item label="编号">
            <el-input v-model="form.noNumber" />
          </el-form-item>
          <el-form-item label="申请单位">
            <el-input v-model="form.applicantCompany" />
            <!--            <el-select v-model="form.region" placeholder="please select your zone">-->
            <!--              <el-option label="Zone one" value="shanghai" />-->
            <!--              <el-option label="Zone two" value="beijing" />-->
            <!--            </el-select>-->
          </el-form-item>
          <el-form-item label="作业申请时间" prop="applyTime">
            <el-date-picker
              v-model="form.applyTime"
              type="datetime"
              placeholder="点击选择时间"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="作业区域管理单位">
            <el-input v-model="form.homeworkAreaManagementUnit" />
          </el-form-item>
          <el-form-item label="属地监督">
            <el-input v-model="form.territorySupervisor" />
          </el-form-item>
          <el-form-item label="申请人">
            <el-input v-model="form.proposer" />
          </el-form-item>
          <el-form-item label="监护人">
            <el-input v-model="form.guardian" />
          </el-form-item>
          <el-form-item label="作业地点">
            <el-input v-model="form.workLocation" />
          </el-form-item>
          <el-form-item label="作业内容">
            <el-input v-model="form.jobContent" type="textarea" />
          </el-form-item>
          <el-form-item label="作业人">
            <el-input v-model="form.operator" type="textarea" />
          </el-form-item>
          <el-form-item label="作业等级">
            <el-radio-group v-model="form.jobGrade">
              <el-radio value="一级">一级</el-radio>
              <el-radio value="二级">二级</el-radio>
              <el-radio value="三级">三级</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联编号">
            <el-input
              v-model="form.associationOn"
              placeholder="关联的其他特殊，非常规作业许可证及编号"
            />
          </el-form-item>
          <el-form-item label="吊装指挥及操作证（证号）">
            <el-input v-model="form.liftingCertificate" />
          </el-form-item>
          <el-form-item label="起重机械操作人员及操作证号">
            <el-input v-model="form.craneCertificate" />
          </el-form-item>
          <el-form-item label="启动机械名称">
            <el-input v-model="form.startMachineryName" placeholder="有车牌号或其他编号需注明" />
          </el-form-item>
          <el-form-item label="吊物内容">
            <el-input v-model="form.liftingObjectContent" type="textarea" />
          </el-form-item>
          <el-form-item label="吊物质量（吨）">
            <el-input v-model="form.liftingObjectMass" type="number" />
          </el-form-item>
          <el-form-item label="作业内容">
            <el-input v-model="form.jobContent1" type="textarea" />
          </el-form-item>
          <el-form-item label="是否编制方案">
            <el-radio-group v-model="form.isPlanCompiled">
              <el-radio value="是">是</el-radio>
              <el-radio value="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="作业时间">
            <el-col :span="11">
              <el-form-item prop="startTime">
                <el-date-picker
                  v-model="form.startTime"
                  type="datetime"
                  placeholder="开始时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="endTime">
                <el-date-picker
                  v-model="form.endTime"
                  type="datetime"
                  placeholder="结束时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="存在的风险">
            <el-checkbox-group v-model="form.existingRisk" style="width: 100%">
              <el-checkbox value="爆炸" name="type"> 爆炸</el-checkbox>
              <el-checkbox value="火灾" name="type"> 火灾</el-checkbox>
              <el-checkbox value="灼伤" name="type"> 灼伤</el-checkbox>
              <el-checkbox value="烫伤" name="type"> 烫伤</el-checkbox>
              <el-checkbox value="机械伤害" name="type"> 机械伤害</el-checkbox>
              <el-checkbox value="中毒" name="type"> 中毒</el-checkbox>
              <el-checkbox value="辐射" name="type"> 辐射</el-checkbox>
              <el-checkbox value="触电" name="type"> 触电</el-checkbox>
              <el-checkbox value="泄露" name="type"> 泄露</el-checkbox>
              <el-checkbox value="物品打击" name="type"> 物品打击</el-checkbox>
              <el-checkbox value="窒息" name="type"> 窒息</el-checkbox>
              <el-checkbox value="坠落" name="type"> 坠落</el-checkbox>
              <el-checkbox value="落物" name="type"> 落物</el-checkbox>
              <el-checkbox value="掩埋" name="type"> 掩埋</el-checkbox>
              <el-checkbox value="噪音" name="type"> 噪音</el-checkbox>
              <el-checkbox value="坍塌" name="type"> 坍塌</el-checkbox>
              <el-checkbox value="淹溺" name="type"> 淹溺</el-checkbox>
              <el-checkbox value="其他" name="type"> 其他</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary" class="absolute bottom-0 right-0" @click="SubmitCraneOperation"
    >下一步
    </el-button>
  </div>
</template>

<style scoped></style>
